<template>
  <section>
    <el-button size="small" type="warning" @click="handleAdd()" icon="plus"  v-if="getOperation('insert-child')">{{$t('menu.addSubMenu')}}</el-button>
    <el-table
      :data="data.children"
      v-loading="data.loading"
      style="width: 100%" border @expand-change="expandHandle">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <menu-tag :data="scope.row" @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDel="handleDel"></menu-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="code"
        :label="$t('menu.code')" minWidth="115">
        <template slot-scope="scope">
          <span class="xt-text-hidden" :title="scope.row.code">{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('menu.name')" minWidth="115">
        <template slot-scope="scope">
          <span class="xt-text-hidden" :title="scope.row.name">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="icon"
        align="center"
        :label="$t('menu.icon')" width="90">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        align="center"
        :label="$t('menu.url')" minWidth="115">
        <template slot-scope="scope">
          <span :title="scope.row.url" class="xt-text-hidden">{{scope.row.url}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="module"
        align="center"
        :label="$t('menu.module')" width="100"
        :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span >{{scope.row.modules.join(",")}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        align="center"
        :label="$t('menu.sort')" width="80">
      </el-table-column>
      <el-table-column
        prop="displayFlag"
        align="center"
        :label="$t('menu.displayFlag')" width="90">
        <template slot-scope="scope">
          {{scope.row.displayFlag ? "√" : "×"}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('operation')" align="center" :width="operationWidth('update-child|delete-child')" v-if="getOperation('update-child|delete-child')">
        <template slot-scope="scope">
          <el-button
            :title="$t('edit')"
            type="success"
            size="small"
            @click="handleEdit(scope.row)" icon="el-icon-edit" v-if="getOperation('update-child')"></el-button>
          <el-button
            :title="$t('delete')"
            size="small"
            type="danger"
            @click="handleDel(scope.row, data)" icon="el-icon-delete" v-if="getOperation('delete-child')"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
<script>

  /*#region 导入函数*/
  import {MenuAPI} from "../../../modules/xtp";
  import lodashArray from "lodash/array";

  /*#endregion*/

  export default {
    name: "MenuTag",
    methods: {

      /*#region 自定义函数(组件change事件等)*/
      expandHandle(row, expanded) {
        return new Promise(function (resolve) {
          if (expanded) {
            row.loading = true;
            MenuAPI.listMenu({pageIndex: 1, pageSize: 999999, parentId: row.id}).then(({list}) => {
              row.loading = false;
              list.map(function (element) {
                element.modules = element.module ? element.module.split(",") : "" || [];
                element.modules = lodashArray.uniq(element.modules);
                lodashArray.remove(element.modules, (n) => n === "" || n === " ");
                element.childs = [];
              });
              list.sort(function (a, b) {
                return a.sort - b.sort;
              });
              row.children = list;
              resolve();
            });

            /* } else {
                 resolve()
             }*/
          }
        });
      },

      /*#endregion*/

      /*#region 数据提交事件*/

      /*#endregion*/

      /*#region 操作函数(handle)*/
      handleAdd(data) {
        this.$emit("handleAdd", data || this.data);
      },
      handleEdit(row) {
        this.$emit("handleEdit", row, this.data);
      },
      handleDel(row, data) {
        this.$emit("handleDel", row, data);
      }

      /*#endregion*/

      /*#region 获取数据*/

      /*#endregion*/

    },

    /*#region 生命周期函数(created、mount、等)*/

    /*#endregion*/

    /*#region 注册绑定数据*/

    data() {
      return {
        menuList: [],
        loading: false
      };
    },
    props: {
      data: {
        type: Object,
        default: () => ({})
      }
    }

    /*#endregion */

  };
</script>
<style scoped></style>
